<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index.css"/>
    <title>分类页面</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/catalog.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>

</head>
<body>
<jsp:include page="/WEB-INF/common/nav.jsp" />
<article>
    <!-- 网站主体 -->
    <div id="main" class="catalog clearfix">
        <section class="menus">
            <!-- 定义资源类型导航 -->
            <ul class="res-nav clearfix">
                <li v-for="(type , index) in typesList">
                    <a href="javascript:void(0)">{{ type.name }}</a>
                    <ul>
                        <li v-for="child in type.children" :class="{active: typeId == child.id }" @click="queryResource(child.id)">
                            <a href="javascript:void(0)">{{ child.name }}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- 定义左侧窗口信息 -->
        <section class="ct content">
            <!-- 定义每一个资源 -->
            <dl class="items" v-for="(res, index) in resources" :key="res.id">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>{{ res.size|size }}</em></div>
                        <div class="filename">{{res.resourceName}}</div>
                        <div class="score">积分:<em>{{res.score}}</em><br/>浏览:<em>{{res.visitNum}}</em></div>
                        <img class="thumbimg" :src="'${pageContext.request.contextPath}/static/images/'+ getExt(res.ext) +'.svg'" />
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">{{res.resourceName}}</a>
                </dt>
            </dl>

            <!-- 清除浮动 -->
            <div class="clearfix"></div>

            <%--  使用组件    --%>
            <pagination v-model="page" :pages="pages" @click-page="queryResourceByTypeId"/>

        </section>


    </div>
</article>

<%-- 引入 分页 组件 --%>
<jsp:include page="/WEB-INF/common/pagination.jsp" />
<jsp:include page="/WEB-INF/common/footer.jsp" />

<script>

    new Vue({
        data: {
            typeId: -1 , // 默认查询的资源类型ID
            typesList: [], // 存储所有的类型列表
            resources: [] , // 存放当前要展示的资源信息
            page: 1,  // 当前页码
            rows: 12,  // 每页显示条数
            total: 0 , // 总个数
            pages: 0 , // 总页数
        },
        created(){
            this.queryResourceTypes() ;
        },
        methods: {
            queryResourceTypes() {
                axios.get("${pageContext.request.contextPath}/res/types").then(ret=> {
                    if (ret.data.success) {
                        let resourceList = ret.data.data ;
                        // 将服务器返回的 List 转成 父子关系的 格式
                        this.typesList = this.covertData(resourceList, null) ;
                        // 取 第一条数据中的第一个子数据作为默认的 typeId
                        if (this.typesList[0]!=null && this.typesList[0].children.length !=0) {
                            this.typeId = this.typesList[0].children[0].id ;
                            this.queryResourceByTypeId();
                        }
                        // 在 虚拟dom 加载完成后 ，触发 jQuery 代码
                        // this.$nextTick(()=> {
                        //     $(".menus .res-nav > li > a").on("click", function(event) {
                        //         $(this).parent().siblings().find("ul").slideUp() ;
                        //         $(this).parent().find("ul").slideDown() ;
                        //     })
                        // })
                    }
                })
            },
            covertData(resourceList, pid) { // 负责转换格式化
                // 获取 pid = 指定值级别的数据
                let data = resourceList.filter(res => res.pid == pid) ;

                // 获取 data 每一条数据 对应的所有子集
                data = data.map(d =>  {
                   let children = this.covertData(resourceList, d.id) ?? [];
                   // 将 d 中的数据 展开后，放到新的对象中
                   return {children, ...d } ;
                })
                return data ;
            },
            queryResource(typeId){
                this.typeId = typeId ;
                this.page = 1;
                this.queryResourceByTypeId();
            },
            queryResourceByTypeId() {
                // 根据 typeId 发送异步请求，负责查询 该分类下的所有资源信息
                axios.get("${pageContext.request.contextPath}/res/?type=" + this.typeId + "&rows=" + this.rows + "&page=" + this.page).then(ret=> {
                    if (ret.data.success) {
                        // 将 异步返回的结果 复制给 响应式数据 resources
                        this.resources = ret.data.data.list ;
                        this.total = ret.data.data.total ;
                        this.pages = ret.data.data.pages ;
                    }
                })
            },
            getExt(ext) {
                let supportExts = ["doc" , "docx", "exe", "gif", "gz", "html", "md", "mp4" , "pdf", "png" , "ppt" , "pptx" , "rar" , "rmvb" , "txt" , "wps" , "xls" , "xlsx" , "zip", "7z", "avi" , "bmp"] ;
                if (supportExts.includes(ext)) {
                    return ext ;
                }
                return "unknow" ;
            }
        },
        filters: {
            size(value) {
                if (value > 1 << 30) {
                    return (value / (1 << 30)).toFixed(1) + "GB" ;
                }else if(value > 1 << 20) {
                    return (value / (1 << 20)).toFixed(1) + "MB" ;
                }else if(value > 1 << 10) {
                    return (value / (1 << 10)).toFixed(1) + "KB" ;
                }
                return value + "B" ;
            }
        },
        components: {
            pagination ,
        }
    }).$mount("#main");

</script>
</body>

</html>